<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <style>

body{height:1800px;}

#a1,#a2{
    display: inline-block;
    width: 100px;
    height: 1000px;
}

#a1{background-color: red;}
#a2{background-color: orange;
position: fixed;}
    </style>
    
    <script src="../jQuery-3.6.3.min.js"> </script>
    <script>
        $(function () {
           
var top=$("#a2").offset().top;

$(window).scroll(function(){
    if($(this).scrollTop()>top){
        $("#a2").css({"position":"fixed","top":"0"
        })
    }else{
        $("#a2").css({
            "position": "relative"
      }  )
}
})

        })
    </script>
</head>

<body>

    <div id="a1"></div><br/>
    <div id="a2"></div>
</body>

</html>





